import React, { Component } from 'react'

export default class Hello extends Component {
  //事件绑定形式是箭头函数
  handler = () => {
    console.log('handlers', this)
  }
  //普通函数传参
  argHandler (n) {
    alert(n)
  }
  // 箭头函数传参
  argumentHandler = (n) => {
    alert(n)
  }
  render () {
    //    React中事件绑定的事件要求是大写
    //      React 中的事件绑定在jsx上 属于合成封装事件
    //     React中事件的事件对象
    //       React e 是类,是封装的一个类 ,但是里面的东西和原生的事件e是一样的  
    //     React中的事件传参
    //     如果是普通函数,建议使用bind来做传参
    //     如果是箭头函数,在调用这个箭头函数时在他外层包裹一层箭头函数
    return (
      <div>
        <button onClick={this.handler}>箭头函数事件</button>
        <button onClick={this.argHandler.bind(this, 10)}>普通函数传递参数</button>
        <button onClick={() => { this.argumentHandler(10) }}>箭头函数传递参数</button>
      </div>
    )
  }
}
